{% extends 'accounts/base.html' %}

{% load i18n thumbnail bootstrap accounts_tags components %}

{% block title %}{% trans 'Edit Profile' %} | {{ block.super }}{% endblock %}

{% block content %}
<div class="register-box clearfix">
    <h2 class="short_headline"><span>{% trans "Connect accounts" %}</span></h2>

    {% for backend in backends.associated %}
        <form method="POST" action="{% url 'social:disconnect' backend.provider %}?next={{ request.path_info|urlencode }}" style="display: inline">
            {% csrf_token %}
            <button class="btn btn-success">{{ backend.provider|fix_auth_backend_name }}</button>
        </form>
    {% endfor %}
    {% for backend in backends.not_associated %}
        <a href="{% url 'social:begin' backend %}?next={{ request.path_info|urlencode }}" class="btn btn-info" title="{% trans 'Connect account' %}">
            {{ backend|fix_auth_backend_name }}
        </a>
    {% endfor %}
</div>

<div class="register-box clearfix" style="margin-top: 20px">
    <h2 class="short_headline"><span>{% trans "Edit your profile" %}</span></h2>

    <div style="padding-left: 140px; margin-bottom: 10px">
        <img src="{{ user.avatar }}" class="img-polaroid"/>
        {% trans "You can edit your avatar on" %} <a href="https://gravatar.com/">gravatar.com</a>
    </div>

    <form action="." method="post" enctype="multipart/form-data" class="edit-form form-horizontal">
        {% csrf_token %}
        {% bootstrap form extra_class='span10' %}
        <div class="form-actions">
            <button type="submit" class="btn btn-large">{% trans "Update" %}</button>
        </div>
    </form>
</div>
{% endblock %}

{% block scripts %}
    {{ block.super }}
    <script>
    $('#id_current_password').attr('autocomplete', 'off').val('');
    $('#id_new_password').attr('autocomplete', 'off').val('');
    $('#id_new_password_verify').attr('autocomplete', 'off').val('');
    </script>
{% endblock %}